<template>
	<div class="main">
		<div class="borderBox">
			<h3>1</h3>
			<!--父子 兄弟 跨级 $emit,$on 通信组件 (a->b) but.js为中间件-->
			<buta/>
			<butb/>
		</div>
		<div class="borderBox">
			<h3>2</h3>
			<!--props父传子 （props接受值）-->
			<Users :usersData="usersData" />
		</div>
		
		<div class="borderBox">
			<h3>3</h3>
			<!--子传父 （$emit）-->
			<div>子传过来的值：{{ title }}</div>
			<Headers @titCg="uptit" />
		</div>
		
		<div class="borderBox">
			<h3>4</h3>
			<!--vuex-->
			<div class="keys">
				<div class="list">
					<keyboard v-for="item in keys" :value="item" />
				</div>
			</div>
			<div class="enter">{{ enter === ""?0:enter }}</div>
			<div class="result">{{ result }}</div>
		</div>
		
		<div class="borderBox">
			<h3>5</h3>
			<!--$attrs -->
			$attrs $listeners >>> test
		</div>
		
		<div class="borderBox">
			<h3>6</h3>
			<p>provide/inject</p>
			<Injects/>
		</div>
		
		
		<div class="borderBox">
			<h3>7</h3>
			<p>$parent / $children与 ref</p>
			<buta ref="buRef" />
			<div v-if="showref">{{showref}}</div>
		</div>
		
	</div>
</template>

<script>
	import buta from './buta'
	import butb from './butb'
	import Users from './users'
	import Headers from './headers'
	import keyboard from './keyboard'
	import Injects from './injects'
	export default {
		name: "but",
		components: {
			Users,
			buta,
			butb,
			Headers,
			keyboard,
			Injects
		},
		provide: {
			name: '传递给子孙'
		},
		computed: {
			result() {
				//通过this.$store获取仓库的数据result
				return this.$store.state.result
			},
			enter() {
				//通过this.$store获取仓库的数据result
				return this.$store.state.enter
			}
		},
		data() {
			return {
				usersData:['小民','张三','李四'],
				title:'',
				keys: [
					'clear', '+', '-', '*',
					'7', '8', '9', '/',
					'4', '5', '6', '0',
					'1', '2', '3', '=',
				],
				showref:''
			}
		},
		methods: {
			uptit(e){
				this.title = e
			}
		},
		mounted() {
			let buRef = this.$refs.buRef
			this.showref = buRef.butatxt
		}
	}
</script>

<style scoped lang="scss">
	.main{margin-bottom: 80px;}
.borderBox{
	padding:20px;
	border:1px solid #ccc
}
.list {
	width: 200px
}
.item {
	display: inline-block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	border: 1px solid red;
	box-sizing: border-box;
	cursor: pointer
}
</style>